<template>
	<div class="item">
		<div>
			<span class="label">产品编码:</span>
			<span class="value">{{value.productCode}}</span>
		</div>
		<div>
			<span class="label">产品名称:</span>
			<span class="value">{{value.productName}}</span>
		</div>
		<div>
			<span class="label">产品规格:</span>
			<span class="value">{{value.spec}}</span>
		</div>
		<div>
			<span class="label">待入库量:</span>
			<span class="value">{{value.inNum}}{{value.unit}}</span>
		</div>
		<div class="btn" @click="go">入库</div>
	</div>
</template>

<script setup>
	import {useRouter} from 'vue-router'
	const router=useRouter();
	
	const props=defineProps({
		value:{
			type:Object,
			default:()=>{
				return {
					productCode:"",
					productName:"",
					spec:"",
					inNum:0,
					unit:""
				};
			}
		}
	})
	
	function go(){
		router.push({"path":"/in",query:props.value});
	}
</script>

<style scoped>
	.item{
		width: 7.5rem;
		height: 2.3rem;
		background-color: #fff;
		margin: 0.2rem auto;
		border-radius: 0.15rem;
		font-size: 0.3rem;
		color: #333;
		padding-top: 0.2rem;
	}
	.item div{
		height: 0.5rem;
		line-height: 0.5rem;
		margin: 0 0.2rem;
	}
	.label{
		color: #666;
	}
	.value{
		margin-left: 0.1rem;
	}
	.btn{
		display: inline-block;
		width: 1.2rem;
		height: 1.2rem;
		line-height: 1.2rem;
		background-color: #FF6600;
		color: #fff;
		text-align: center;
		position: relative;
		left: 5.8rem;
		top: -1rem;
	}
</style>